<template>
  <div class="header">
    <el-row class="top">
      <el-col class="left" :span="6">
        <!-- logo -->
        <img @click="go1" :src="logoimg" :title="site_title" />
      </el-col>
      <el-col :span="9" class="right">
        <el-row>
          <el-col :span="4">
            <span class="subtit" @click="go1">
              首页
            </span>
          </el-col>
          <el-col :span="5">
            <span class="subtit" @click="go2">
              产品
            </span>
          </el-col>
          <el-col :span="5">
            <span class="subtit" @click="go3">
              解决方案
            </span>
          </el-col>
          <el-col :span="5">
            <span class="subtit" @click="go4">
              市场动态
            </span>
          </el-col>
          <el-col :span="5">
            <span class="subtit" @click="go5">
              公司简介
            </span>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Header',
  data() {
    return {
      logoimg: '',
      site_title: ''
    }
  },
  mounted() {
    this.getWebInfo()
  },
  methods: {
    go1() {
      this.$router.push('/')
    },
    go2() {
      this.$router.push('/products')
    },
    go3() {
      this.$router.push('/fangan')
    },
    go4() {
      this.$router.push('/shichang')
    },
    go5() {
      this.$router.push('/about')
    },
    getWebInfo() {
      this.axios
        .get('/api/bdweb/webinfo')
        .then(res => {
          this.logoimg = res.data.data.logo
          this.site_title = res.data.data.site_title
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>

<style>
.header {
  width: 1920px;
  height: 100px;
  background: #ffffff;
  color: #000;
}
.right {
  color: #000;
}
.subtit {
  font-size: 23px;
  color: #000;
  line-height: 23px;
  z-index: 100;
  cursor: pointer;
}
.subtit:hover {
  border-bottom: 2px solid;
  padding-bottom: 5px;
}
.top {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.left {
  padding-left: 225px;
}
</style>
